import React from 'react'
import {Card, Button, Radio} from 'antd'
import './ui.less'

export default class Buttons extends React.Component {
    constructor() {
        super()
        this.state = {
            loading: true,
            size:'default',
        }
    }

    handleClick = () => {
        this.setState({
            loading: !this.state.loading
        })
    }
    sizeChange = (e) => {
        this.setState({
            size: e.target.value
        })
    }

    render() {
        return (
            <div>
                <Card title={"基础按钮"}>
                    <Button type={"primary"}>imooc</Button>
                    <Button>imooc</Button>
                    <Button type={"dashed"}>imooc</Button>
                    <Button type={"danger"}>imooc</Button>
                    <Button disabled>imooc</Button>
                </Card>
                <Card title={"图形按钮"}>
                    <Button icon={"plus"}>创建</Button>
                    <Button icon={"edit"}>编辑</Button>
                    <Button icon={"delete"}>删除</Button>
                    <Button shape="circle" icon={"search"}></Button>
                    <Button icon={"search"} type="primary">搜索</Button>
                    <Button icon={"download"}>下载</Button>
                </Card>
                <Card title={"loading按钮"}>
                    <Button type="primary" loading={this.state.loading}>保存</Button>
                    <Button shape="circle" icon={"search"} loading={this.state.loading}></Button>
                    <Button type="primary"  onClick={this.handleClick}>切换loding状态</Button>
                </Card>
                <Card title={"按钮大小"}>
                    <Radio.Group value={this.state.size} onChange={this.sizeChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                    <Button type={"primary"} size={this.state.size}>imooc</Button>
                    <Button size={this.state.size}>imooc</Button>
                    <Button type={"dashed"} size={this.state.size}>imooc</Button>
                    <Button type={"danger"} size={this.state.size}>imooc</Button>
                    <Button disabled size={this.state.size}>imooc</Button>
                </Card>
            </div>
        );
    }
}

